<template>
	<div class="app-container">
		<!-- 加载动画 -->
		<div v-if="isLoading" class="loading-screen">
			<!-- 装饰性元素 -->
			<div class="loading-decorations">
				<div class="floating-heart">🌙</div>
				<div class="floating-star">✨</div>
				<div class="floating-leaf">🍃</div>
				<div class="floating-flower">🌿</div>
				<div class="floating-butterfly">🦉</div>
			</div>

			<div class="loading-content">
				<div class="loading-logo">
					<div class="logo-container">
						<div class="logo-circle logo-circle-1"></div>
						<div class="logo-circle logo-circle-2"></div>
						<div class="logo-circle logo-circle-3"></div>
						<h1 class="loading-title">TATA树洞</h1>
					</div>
				</div>
				<div class="loading-spinner">
					<div class="spinner-container">
						<div class="spinner-dot"></div>
						<div class="spinner-dot"></div>
						<div class="spinner-dot"></div>
					</div>
				</div>
				<p class="loading-text">正在为你准备温暖的树洞...</p>
				<div class="loading-progress">
					<div class="progress-bar">
						<div class="progress-fill"></div>
					</div>
				</div>
			</div>
		</div>

		<!-- 浮动叶子 -->
		<div
			v-show="!isLoading"
			class="floating-leaves"
			style="opacity: 0; transition: opacity 0.3s ease"
		>
			<div
				v-for="leaf in leaves"
				:key="leaf.id"
				class="leaf"
				:style="leaf.style"
			></div>
		</div>

		<!-- 主要内容 -->
		<div
			v-show="!isLoading"
			class="main-content"
			style="opacity: 0; transition: opacity 0.3s ease"
		>
			<!-- 左侧标题区域 -->
			<div class="title-section">
				<div class="logo">
					<img
						src="~/assets/images/logo.svg"
						alt="TATA树洞"
						class="logo-image"
					/>
				</div>
				<h1 class="app-title">中小学生心灵疗愈APP</h1>
			</div>

			<!-- 右侧注册区域 -->
			<div class="register-section">
				<p class="main-subtitle">让TaTa陪你，走过成长中的四季心情</p>
				<div class="register-card">
					<h2 class="register-title">登录</h2>

					<form
						@submit.prevent="handleRegister"
						class="register-form"
					>
						<div class="form-group">
							<div class="form-field">
								<label class="field-label">姓名</label>
								<input
									v-model="registerForm.name"
									type="text"
									class="field-input"
									placeholder="请输入你的姓名"
									required
								/>
							</div>
						</div>

						<div class="form-group">
							<div class="form-field">
								<div class="field-content">
									<div class="field-info">
										<label class="field-label">学校</label>
										<span class="field-placeholder"
											>请选择你的学校</span
										>
									</div>
									<div class="field-icon">
										<svg
											viewBox="0 0 20 20"
											class="dropdown-icon"
										>
											<polygon
												points="5,6 15,6 10,13"
												fill="#FFFFFF"
											/>
										</svg>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group">
							<div class="form-field">
								<div class="field-content">
									<div class="field-info">
										<label class="field-label">班级</label>
										<span class="field-placeholder"
											>请选择你的班级</span
										>
									</div>
									<div class="field-icon">
										<svg
											viewBox="0 0 20 20"
											class="dropdown-icon"
										>
											<polygon
												points="5,6 15,6 10,13"
												fill="#FFFFFF"
											/>
										</svg>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group">
							<div class="form-field">
								<label class="field-label">学号</label>
								<input
									v-model="registerForm.studentId"
									type="text"
									class="field-input"
									placeholder="请输入你的学号"
									required
								/>
							</div>
						</div>

						<button
							type="submit"
							class="register-btn"
							:disabled="loading"
						>
							{{ loading ? '注册中...' : '进 入' }}
						</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

// 禁用默认布局，让页面撑满屏幕
definePageMeta({
	layout: false,
})

// 字体预加载 - 使用CSS中的@font-face已足够

const router = useRouter()

// 注册表单数据
const registerForm = ref({
	name: '',
	school: '',
	class: '',
	studentId: '',
})

// 加载状态
const loading = ref(false)
const isLoading = ref(true)

// 浮动叶子动画
const leaves = ref([])

// 处理注册
const handleRegister = async () => {
	if (!registerForm.value.name) {
		alert('请填写姓名')
		return
	}

	loading.value = true

	try {
		// 模拟注册API调用
		await new Promise((resolve) => setTimeout(resolve, 1000))

		// 注册成功，跳转到测验页面
		router.push('/quiz')
	} catch (error) {
		alert('注册失败，请重试')
	} finally {
		loading.value = false
	}
}

// 生成浮动叶子
const generateLeaves = () => {
	const leafEmojis = ['🍃', '🌿', '🍀', '🌱']
	for (let i = 0; i < 15; i++) {
		leaves.value.push({
			id: i,
			style: {
				left: Math.random() * 100 + '%',
				top: Math.random() * 100 + '%',
				animationDelay: Math.random() * 5 + 's',
				animationDuration: Math.random() * 3 + 2 + 's',
			},
		})
	}
}

// 加载完成检查
const checkLoadingComplete = () => {
	console.log('开始加载检查')
	// 检查是否已经加载过
	const hasLoaded = localStorage.getItem('tata-app-loaded')
	console.log('是否已加载过:', hasLoaded)
	if (hasLoaded === 'true') {
		console.log('已加载过，直接显示内容')
		setTimeout(() => {
			isLoading.value = false
			console.log('已经加载完成，显示主要内容')
			// 延迟显示内容，确保平滑过渡
			setTimeout(() => {
				const mainContent = document.querySelector('.main-content')
				const floatingLeaves =
					document.querySelector('.floating-leaves')
				if (mainContent) mainContent.style.opacity = '1'
				if (floatingLeaves) floatingLeaves.style.opacity = '1'
			}, 20)
		}, 300)
		return
	}

	let resourcesLoaded = 0
	const totalResources = 2 // 背景图片 + 字体

	const checkAllResourcesLoaded = () => {
		resourcesLoaded++
		console.log(`资源加载进度: ${resourcesLoaded}/${totalResources}`)
		if (resourcesLoaded >= totalResources) {
			console.log('所有资源加载完成，准备显示内容')
			// 所有资源加载完成，延迟一点时间确保渲染完成
			setTimeout(() => {
				isLoading.value = false
				localStorage.setItem('tata-app-loaded', 'true')
				console.log('加载完成，显示主要内容')
				// 延迟显示内容，确保平滑过渡
				setTimeout(() => {
					const mainContent = document.querySelector('.main-content')
					const floatingLeaves =
						document.querySelector('.floating-leaves')
					if (mainContent) mainContent.style.opacity = '1'
					if (floatingLeaves) floatingLeaves.style.opacity = '1'
				}, 20)
			}, 300)
		}
	}

	// 检查背景图片是否加载完成
	const bgImage = new Image()
	bgImage.onload = () => {
		console.log('背景图片加载完成')
		checkAllResourcesLoaded()
	}
	bgImage.onerror = () => {
		console.log('背景图片加载失败，跳过')
		checkAllResourcesLoaded()
	}
	// 使用正确的图片路径
	bgImage.src = '/bg.png'
	console.log('开始检查背景图片加载:', bgImage.src)

	// 等待字体加载完成
	console.log('开始检查字体加载状态')
	if (document.fonts && document.fonts.ready) {
		document.fonts.ready
			.then(() => {
				console.log('字体加载完成')
				checkAllResourcesLoaded()
			})
			.catch(() => {
				console.log('字体加载失败，跳过')
				checkAllResourcesLoaded()
			})
	} else {
		console.log('浏览器不支持字体检测，直接跳过')
		checkAllResourcesLoaded()
	}

	// 设置最大等待时间，防止卡死（10秒）
	setTimeout(() => {
		if (isLoading.value) {
			console.log('加载超时，强制完成')
			isLoading.value = false
			localStorage.setItem('tata-app-loaded', 'true')
		}
	}, 50000)
}

// 组件挂载时生成叶子和检查加载状态
onMounted(() => {
	// 暂时重定向到 home 页面
	// 模拟用户已登录数据
	const userInfo = {
		name: '测试用户',
		school: '测试学校',
		class: '一年级一班',
		studentId: '10001',
	}
	localStorage.setItem('userInfo', JSON.stringify(userInfo))
	router.push('/quiz')

	// generateLeaves()
	// checkLoadingComplete()
})

// 组件卸载时清理
onUnmounted(() => {
	leaves.value = []
})
</script>

<style>
/* 字体定义 */
@font-face {
	font-family: '毛啃体';
	src: url('~/assets/fonts/MaoKenShiJinHei-2.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: block; /* 阻止字体交换，避免抖动 */
}

@font-face {
	font-family: 'Alibaba PuHuiTi 3.0';
	src: url('~/assets/fonts/AlibabaPuHuiTi-3-115-Black.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: block; /* 阻止字体交换，避免抖动 */
}

/* 全局重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	height: 100%;
}
</style>

<style scoped>
/* 全局重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 应用容器 */
.app-container {
	min-height: 100vh;
	background: url('~/assets/images/bg.png') center / 100% 100% no-repeat;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 1.25rem 2rem 4rem 2rem;
}

/* 加载动画屏幕 */
.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(
		135deg,
		#1a1a2e 0%,
		#16213e 25%,
		#0f3460 50%,
		#533483 75%,
		#7209b7 100%
	);
	background-size: 400% 400%;
	animation: gradientShift 3s ease infinite;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	overflow: hidden;
}

/* 装饰性元素 */
.loading-decorations {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.floating-heart,
.floating-star,
.floating-leaf,
.floating-flower,
.floating-butterfly {
	position: absolute;
	font-size: 2rem;
	animation: floatAround 6s ease-in-out infinite;
	opacity: 0.8;
}

.floating-heart {
	top: 20%;
	left: 15%;
	animation-delay: 0s;
}

.floating-star {
	top: 30%;
	right: 20%;
	animation-delay: 1s;
}

.floating-leaf {
	bottom: 30%;
	left: 25%;
	animation-delay: 2s;
}

.floating-flower {
	top: 60%;
	right: 15%;
	animation-delay: 3s;
}

.floating-butterfly {
	top: 70%;
	left: 10%;
	animation-delay: 4s;
}

.loading-content {
	text-align: center;
	color: white;
	position: relative;
	z-index: 2;
}

.loading-logo {
	margin-bottom: 2rem;
}

.logo-container {
	position: relative;
	display: inline-block;
}

.logo-circle {
	position: absolute;
	border-radius: 50%;
	animation: pulse 2s ease-in-out infinite;
}

.logo-circle-1 {
	width: 120px;
	height: 120px;
	background: rgba(255, 255, 255, 0.1);
	top: -10px;
	left: -10px;
	animation-delay: 0s;
}

.logo-circle-2 {
	width: 100px;
	height: 100px;
	background: rgba(255, 255, 255, 0.08);
	top: -5px;
	left: -5px;
	animation-delay: 0.5s;
}

.logo-circle-3 {
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.05);
	top: 0;
	left: 0;
	animation-delay: 1s;
}

.loading-title {
	/* font-family: '毛啃体', '微软雅黑', sans-serif; */
	font-size: 4rem;
	font-weight: 500;
	color: #ffffff;
	margin: 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	animation: bounce 2s ease-in-out infinite;
	position: relative;
	z-index: 1;
}

.loading-spinner {
	margin: 2rem 0;
}

.spinner-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.spinner-dot {
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	animation: dotBounce 1.4s ease-in-out infinite both;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.spinner-dot:nth-child(1) {
	animation-delay: -0.32s;
}
.spinner-dot:nth-child(2) {
	animation-delay: -0.16s;
}
.spinner-dot:nth-child(3) {
	animation-delay: 0s;
}

.loading-text {
	/* font-family: 'Alibaba PuHuiTi 3.0', 'Alibaba PuHuiTi', sans-serif; */
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1.5rem 0;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.loading-progress {
	width: 300px;
	margin: 0 auto;
}

.progress-bar {
	width: 100%;
	height: 8px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #87ceeb, #dda0dd, #ffb6c1);
	background-size: 200% 100%;
	border-radius: 10px;
	animation: progressMove 2s ease-in-out infinite;
}

/* 动画效果 */
@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes floatAround {
	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}
	25% {
		transform: translateY(-20px) rotate(90deg);
	}
	50% {
		transform: translateY(-10px) rotate(180deg);
	}
	75% {
		transform: translateY(-15px) rotate(270deg);
	}
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.6;
	}
}

@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}

@keyframes dotBounce {
	0%,
	80%,
	100% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
}

@keyframes progressMove {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* 浮动叶子动画 */
.floating-leaves {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.leaf {
	position: absolute;
	width: 20px;
	height: 20px;
	background: rgba(158, 189, 111, 0.6);
	border-radius: 50% 0;
	animation: leafFloat 4s ease-in-out infinite;
	opacity: 0.7;
}

@keyframes leafFloat {
	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-20px) rotate(180deg);
	}
}

/* 主要内容区域 */
.main-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	gap: 4rem;
	padding: 0 2rem;
}

.main-subtitle {
	font-family: '毛啃体', '微软雅黑', sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.5;
	color: #ffffff;
	text-align: right;
	margin: 0 0 1rem 0;
	margin-right: 1.25rem;
	white-space: nowrap;
}

/* 左侧标题区域 */
.title-section {
	flex: 1;
	color: white;
	text-align: left;
	padding-left: 1rem;
}

.logo {
	margin-top: 25%;
	margin-bottom: 2rem;
	display: flex;
	justify-content: center;
}

.logo-image {
	height: 80px;
	width: auto;
	max-width: 400px;
}

.app-title {
	font-family: '毛啃体', '微软雅黑', sans-serif;
	font-size: 3.125rem; /* 50px */
	font-weight: 500;
	line-height: 1.2;
	color: #ffffff;
	margin-bottom: 1rem;
	text-align: center;
}

.subtitle {
	font-family: '微软雅黑', sans-serif;
	font-size: 2.5rem; /* 40px */
	font-weight: 500;
	line-height: 1.5;
	color: #ffffff;
	text-align: center;
	margin-bottom: 2rem;
}

/* 右侧注册区域 */
.register-section {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: auto;
}

/* 注册卡片 */
.register-card {
	width: 400px;
	/* min-height: 723px; */
	background: linear-gradient(
		135deg,
		rgba(174, 203, 255, 0.05) 1%,
		rgba(238, 238, 238, 0.2) 100%
	);

	border-radius: 20px;
	backdrop-filter: blur(70px);
	padding: 1.5rem 1rem;
	margin-top: 3rem;
	margin-right: 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

/* 注册标题 */
.register-title {
	font-family: '毛啃体', '微软雅黑', sans-serif;
	font-size: 2.5rem; /* 40px */
	font-weight: 500;
	line-height: 1.2;
	color: #ffffff;
	text-align: center;
	margin-bottom: 2.5rem;
	margin-top: 0rem;
}

/* 表单 */
.register-form {
	width: 100%;
	max-width: 361px;
	/* height: 380px; */
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 0rem;
}

/* 表单组 */
.form-group {
	width: 100%;
}

/* 表单字段 */
.form-field {
	width: 100%;
	height: 40px;
	background: rgba(158, 189, 111, 0.5);
	border-radius: 16px;
	padding: 27px 34px;
	display: flex;
	align-items: center;
	gap: 36px;
	box-sizing: border-box;
}

/* 字段标签 */
.field-label {
	font-family: '毛啃体', '微软雅黑', sans-serif;
	font-size: 1.375rem; /* 22px */
	font-weight: 500;
	line-height: 1.2;
	color: #ffffff;
	text-align: center;
	white-space: nowrap;
}

/* 字段输入框 */
.field-input {
	flex: 1;
	max-width: 200px;
	background: transparent;
	border: none;
	outline: none;
	color: #ffffff;
	font-family: 'Alibaba PuHuiTi 3.0', 'Alibaba PuHuiTi', sans-serif;
	font-size: 1.25rem; /* 20px */
	font-weight: 500;
	line-height: 1.2;
	/* text-align: center; */
}

.field-input::placeholder {
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Alibaba PuHuiTi 3.0', 'Alibaba PuHuiTi', sans-serif;
	font-size: 1.25rem; /* 20px */
	font-weight: 500;
	line-height: 1.2;
	/* text-align: center; */
}

/* 字段内容（用于下拉框样式） */
.field-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 2rem;
}

.field-info {
	display: flex;
	align-items: center;
	gap: 36px;
}

.field-placeholder {
	font-family: 'Alibaba PuHuiTi 3.0', 'Alibaba PuHuiTi', sans-serif;
	font-size: 1.25rem; /* 20px */
	font-weight: 500;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

/* 字段图标 */
.field-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dropdown-icon {
	width: 100%;
	height: 100%;
}

/* 注册按钮 */
.register-btn {
	height: 60px;
	background: #9ebd6f;
	border: none;
	border-radius: 15px;
	color: #ffffff;
	font-family: 'Alibaba PuHuiTi 3.0', 'Alibaba PuHuiTi', sans-serif;
	font-size: 1.875rem; /* 30px */
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px;
}

.register-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(158, 189, 111, 0.4);
}

.register-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.main-content {
		flex-direction: column;
		gap: 1.5rem;
		padding: 0 1rem;
	}

	.title-section {
		text-align: center;
		padding-left: 0;
	}

	.register-section {
		align-items: center;
		width: 100%;
	}

	.main-subtitle {
		font-size: 1.25rem;
		white-space: normal;
		text-align: center;
		margin-right: 0;
	}

	.register-card {
		width: 100%;
		max-width: 500px;
	}
}

@media (max-width: 768px) {
	.app-container {
		padding: 2rem 1rem;
	}

	.main-content {
		padding: 0 0.5rem;
	}

	.register-card {
		width: 100%;
		max-width: 400px;
		min-height: 600px;
		padding: 2rem 1.5rem;
	}

	.register-btn {
		width: 100%;
		max-width: 350px;
	}

	.app-title {
		font-size: 2.5rem;
	}

	.subtitle {
		font-size: 2rem;
	}

	.logo-image {
		height: 60px;
		max-width: 300px;
	}

	.main-subtitle {
		font-size: 1.125rem;
		white-space: normal;
		text-align: center;
		margin-right: 0;
	}
}
</style>
